@mixin margin {
  margin-top: 10px;
  margin-left: 10px;
}
@mixin padding {
  padding-left: 10px;
  padding-bottom: 10px;
}

@mixin img {
  width: 100%;
  height: 100%;
  border-radius: 4px;
}

body {
  margin: 0;
  padding: 0;

  font-family: 'Raleway', sans-serif;
  font-weight: 300px;
  font-size: 16px;
  text-align: center;
}

#container {
  width: 100vw;
  height: 100vh;
  background: green;
  background: url(../image/bg.png) no-repeat;
  transform: scaleY(1.1);
}

#wall {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  position: fixed;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  background: url('../image/1.jpg');

  #people-span {
    margin-left: 80px;
  }

  #people-info:hover .people-info-content {
    display: block;
  }

  .people-info-content {
    @include padding();
    margin-left: 30%;
    background: linear-gradient(to right, #e9b3d9, #ebc9ee, #f0c3f0, #ecaaec, #fdbbfa);
    position: absolute;
    color: black;
    border-radius: 10px;
    line-height: 20px;
    text-align: left;
    width: 400px;
    height: 400px;
    display: none;

    .info-top {
      width: 100%;
      height: 80px;
      background: green;
      margin-left: -6px;
      text-align: center;
      img {
        width: 80px;
        height: 80px;
        margin-top: 50px;
        box-shadow: none;
      }
    }

    h3 {
      margin-top: 6px;
    }
  }
  .picture {
    img {
      @include img();
      width: 50px;
      height: 300px;

      width: 130px;
      margin: 10px 24px;
      height: 200px;
      box-shadow: 2px 1px 3px #f8a4df;
    }
    img:hover {
      animation: moveImg 5s forwards;
    }

    @keyframes moveImg {
      5% {
        animation: 5s;
        transform: scale(0.1);
        transform: rotate(360deg);
        filter: blur(6px);
      }

      to {
        transform: rotate(360deg);
        z-index: 333;
        transform: scale(2.4);
        filter: none;
      }
    }
  }
}
// 点击冒出小星星
.love {
  width: 70px;
  height: 80px;

  display: none;
  position: absolute;
  margin: -100px 80%;

  img {
    width: 10px;
    height: 10px;
    position: absolute;
    margin: 10px 30px;
  }
  img:nth-child(1) {
    margin: 170px -30px;
    animation: love1 linear 1s infinite;
  }

  img:nth-child(2) {
    margin: 170px -30px;

    animation: love1 linear 1s infinite;
  }

  @keyframes love1 {
    1% {
      margin-top: 70px;
    }
    50% {
      margin-left: -10px;
    }
    to {
      margin: 10px 10px;
      transform: scale(2.4);
    }
  }
  @keyframes love2 {
    1% {
      margin-top: 70px;
    }

    to {
      margin-top: 10px;

      transform: scale(2.4);
    }
  }
}
#people-span {
  position: relative;
}
#people-span:active .love {
  display: block;

  z-index: 555;
}
